import React, { Component } from 'react';
import { Button, Input, message, Modal } from 'antd';
import {
  getCustomAttributeList,
  deleteCustomAttribute,
  changeAttributeStatus
} from '@api/customAttribute';
import SiteAttributeModal from './components/site-attribute-modal';
import SiteAttributeTable from './components/site-attribute-table';
import _ from 'lodash';
import './index.less';

const Search = Input.Search;
const prefixCls = 'site-attribute-config';

class SiteAttributeConfig extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filter: {
        page: 1,
        pageSize: 10,
        search: ''
      },
      data: [],
      rowData: {},
      visible: false,
      loading: false
    };
  }
  componentDidMount() {
    this.getCustomAttributeList();
  }

  getCustomAttributeList = () => {
    const { filter } = this.state;
    this.setState({ loading: true });
    getCustomAttributeList(filter)
      .then(res => {
        const data = _.get(res, 'data.data.list', []);
        const count = _.get(res, 'data.data.count', 0);
        this.setState({ data, count, loading: false });
      })
      .catch(() => {
        message.error('获取资产属性列表失败');
        this.setState({ loading: false });
      });
  };

  changeModalVisible = (visible, rowData = {}) => {
    this.setState({ visible, rowData });
  };

  changeDeleteModalVisible = (delVisible, rowData = {}) => {
    const { name = '' } = rowData;
    const deleteTipTitle = `删除“${name}”属性`;
    this.setState({ delVisible, rowData, deleteTipTitle });
  };

  onDelete = () => {
    const { rowData } = this.state;
    const { _id: id } = rowData;
    deleteCustomAttribute({ id })
      .then(() => {
        this.changeDeleteModalVisible(false);
        this.getCustomAttributeList();
        message.success('删除成功');
      })
      .catch(() => {
        message.error('删除失败');
      });
  };

  changeAttributeStatus = rowData => {
    const { status, _id: id } = rowData;
    const body = { status: !status, id };
    this.setState({ loading: true });
    changeAttributeStatus(body)
      .then(() => {
        this.getCustomAttributeList();
      })
      .catch(() => {
        message.error('修改状态失败');
      });
  };

  onPaginationChange = (page, pageSize) => {
    const { filter } = this.state;
    this.setState(
      {
        filter: {
          ...filter,
          page,
          pageSize
        }
      },
      this.getCustomAttributeList
    );
  };

  render() {
    const {
      filter,
      visible,
      rowData,
      data,
      count,
      loading,
      deleteTipTitle,
      delVisible
    } = this.state;
    const pagination = {
      total: count,
      current: filter.page,
      pageSize: filter.pageSize,
      showQuickJumper: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showSizeChanger: true,
      size: 'small',
      showTotal: num => `共 ${num} 条`,
      onChange: this.onPaginationChange,
      onShowSizeChange: this.onPaginationChange
    };
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-page-title`}>资产属性配置</div>
        <div className={`${prefixCls}-header`}>
          <div className={`${prefixCls}-header-left`}>
            <Button type="primary" onClick={() => this.changeModalVisible(true)}>
              添加属性
            </Button>
          </div>
          <div className={`${prefixCls}-header-right`}>
            <Search
              enterButton
              placeholder="请输入关键词搜索"
              onSearch={value => {
                let search = value.toString();
                filter.search = search;
                filter.page = 1;
                this.setState({ filter }, this.getCustomAttributeList);
              }}
            />
          </div>
        </div>
        <div className={`${prefixCls}-count`}>当前有&quot;{count}&quot;个属性</div>
        <SiteAttributeTable
          data={data}
          loading={loading}
          pagination={pagination}
          onEdit={rowData => this.changeModalVisible(true, rowData)}
          onDelete={rowData => this.changeDeleteModalVisible(true, rowData)}
          onChangeStatus={rowData => this.changeAttributeStatus(rowData)}
        />
        <SiteAttributeModal
          data={rowData}
          visible={visible}
          loadList={this.getCustomAttributeList}
          onClose={() => this.changeModalVisible(false)}
        />
        <Modal
          maskClosable={false}
          className={`${prefixCls}-del-modal`}
          visible={delVisible}
          title={deleteTipTitle}
          onOk={this.onDelete}
          onCancel={() => this.changeDeleteModalVisible(false)}
        >
          将同时删除资产的相关数据，确认要删除该属性吗
        </Modal>
      </div>
    );
  }
}

export default SiteAttributeConfig;
